//首页主界面
'use strict';
import React,{Component,PropTypes} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  Dimensions,
  ScrollView,
  RecyclerViewBackedScrollView
} from 'react-native';
import {connect} from 'react-redux';
import {fetchADSlider} from '../actions/ADSliderAction';
import {fetchForZhiHuData} from '../actions/ZhiHuDataAction';
import Swiper from 'react-native-swiper';


var {height, width} = Dimensions.get('window');
import ValueConfigs from '../configs/ValueConfigs';

class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount(){

  }

  componentDidMount(){
    const {dispatch} = this.props;
    dispatch(fetchADSlider());
    dispatch(fetchForZhiHuData());
  }

  render(){
    const {isFetching, ad_data,ZhiHuData} = this.props
    console.log("js_Tag mapStateToProps ZhiHuData: ",ZhiHuData);
    return(
      <ScrollView style={styles.containerStyle}>
            <View style={styles.containerStyle}>
              <Swiper
                style={styles.ADStyle}
                height={ValueConfigs.ADSliderHeight}
                dot={<View style={{backgroundColor: 'white', width: 6, height: 6, borderRadius: 4, marginLeft: 3, marginRight:3, marginTop: 3,  marginBottom: 3}} />}
                activeDot={<View style={{backgroundColor: 'red', width: 8, height: 8, borderRadius: 4, marginLeft: 3,  marginRight:3, marginTop: 3,  marginBottom: 3}} />}
                paginationStyle={{bottom: 6, right: null, left: 13}}
                showsButtons={false}
                autoplay={true}>
                  {ad_data.map((ad) => (
                    <Image
                    key={ad.slide}
                    style={[styles.slide1]} source={{uri:ad.slide}}/>
                    ))}
              </Swiper>
              <View style={{height:6,width:width,backgroundColor:"#000"}}>
              </View>
              <View style={{backgroundColor:'#fafafa'}}>
              {ZhiHuData.stories&&ZhiHuData.stories.map((item) => (
                <View key={item.id} style={{
                  flexDirection:'row',
                  height:120,
                  width:width,
                  backgroundColor:"#999",
                  marginBottom:6,
                  paddingLeft:8,
                  paddingRight:8,

                }}>
                  <Image
                      style={{alignSelf:'center',width:100,height:100}} source={{uri:item.images[0]}}/>

                  <Text style={{
                    alignSelf:'center',
                    height:100,
                    width:width-124,
                    fontSize:18,
                    color:'#000',
                    marginLeft:8,
                    flexWrap:'wrap'}}>
                  {item.title}
                  </Text>
                </View>
                ))}
              </View>
            </View>
      </ScrollView>
    );
  }
}

const styles=StyleSheet.create({
  containerStyle:{
     flex:1,
     backgroundColor:ValueConfigs.MainBackgroundColor
  },
  ADStyle:{
    height: ValueConfigs.ADSliderHeight,
    width:width,
    backgroundColor:'green'
  },
  slide1: {
   height: ValueConfigs.ADSliderHeight,
   width:width,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#9DD6EB',
 },
});

function mapStateToProps(state){
  const{ADSlider,ZhiHuDataReducer} = state;
  const {
    isFetching,
    ad_data,
    isZhiHuFetching,
    ZhiHuData
  } ={
    isFetching:ADSlider.isFetching,
    ad_data:ADSlider.ad_data,
    isZhiHuFetching:ZhiHuDataReducer.isZhiHuFetching,
    ZhiHuData:ZhiHuDataReducer.ZhiHuData
  }|| {
    isFetching: true,
    ad_data: [],
    isZhiHuFetching: true,
    ZhiHuData:[]
  }

 return{
   isFetching,
   ad_data,
   ZhiHuData,
   isZhiHuFetching
 };
}

export default connect(mapStateToProps)(HomePage);
